 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>聊天记录</title>

<link rel="stylesheet" href="/public/static/layui/css/layui.css">
<style>
body .layim-chat-main{height: auto;}
div#LAY_page {
  text-align: center;
}
</style>
</head>
<body>

<div class="layim-chat-main">
  <ul id="LAY_view"></ul>
</div>

<div id="LAY_page" style="margin: 0 10px;"></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->


<script src="/public/static/layui/layui.js"></script>
<script>
layui.use(['layim', 'laypage'], function(){
  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,laypage = layui.laypage;
  
  //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html
  
  
  //开始请求聊天记录
  var param =  location.search; //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据

    var cache = parent.layui.layim.cache();
    var url = cache.base.historyChatLog.url || {};  //获得URL参数。
    $.get(url+param, {}, function(res) {
        if(res.code == 0) {
            var html = laytpl(LAY_tpl.value).render({
                data: res.data
            });
            $('#LAY_view').html(html);

          laypage.render({
              elem: 'LAY_page'
              , count: res.pages.count
              , limit: res.pages.limit
              , prev: '<i class="layui-icon">&#58970;</i>'
              , next: '<i class="layui-icon">&#xe65b;</i>'
              , layout: ['prev', 'next']
              , curr: res.pages.curr
              , jump: function (obj, first) {
                  //obj包含了当前分页的所有参数，比如：
                  //首次不执行
                  if (!first) {
                      $.get(url + param, {page: obj.curr || 1,off:res.pages.off}, function (data) {
                          if (data.code != 0) {
                              return layer.msg(data.msg);
                          }
                          var html = laytpl(LAY_tpl.value).render({
                              data: data.data
                          });
                          $('#LAY_view').html(html);
                      });
                  }
              }
          });
        }
    });
  });
</script>
</body>
</html>
